import { Form } from 'antd'
import { InputItem, Button } from 'antd-mobile'
import styles from './index.scss'
import ReactSVG from 'react-svg'
import { connect } from 'dva'
import TipModal from '../Modal'
const FormItem = Form.Item
const stepSecond = ({
  dispatch,
  next,
  initValue,
  disabledControl,
  code: {
    isClick,
    count,
    modalControl,
    content
  },
  form: { validateFields, getFieldDecorator, isFieldTouched, getFieldError }
}) => {
  // 定义需要的modal数据
  const closeModal = () => {
    dispatch({
      type: 'code/modalControlAction',
      payload:{
        modalControl:false
      }
    })
  }
  const modalData = {
    modalControl,
    closeModal,
    content
  }
  // 手机号正则表达式
  const regPhone = /^1[34578]\d{9}$/
  const regCode = /^(\d{6})$/
  const showModal = (content) => {
      dispatch({
        type: 'code/modalControlAction',
        payload:{
          modalControl:true,
          content:content
        }
      })
  }
  const submit = () => {
    validateFields((error, value) => {
      if (!error) {
        console.log(value)
        next()
      } else {
        try {
          Object.keys(error).map(item => {
            if (error[item]) {
              console.log(error[item].errors[0].message)
              showModal(error[item].errors[0].message)
              throw error[item]
            }
             else {
              return 1
            }
          })
        } catch (e) {
          console.log(e)
        }
       console.log(Object.keys(error))
      }
    })
  }
  // 用户输入手机号码且没错误
  const phoneNoRight = isFieldTouched('phoneNo') && !getFieldError('phoneNo')
  // 点击获取验证码
  const reduceCount = () => {
    if (count > 0) {
      dispatch({
        type: 'code/getCode',
        payload: {
          code: {
            isClick: true,
            count: count--
          }
        }
      })
    } else {
      dispatch({
        type: 'code/getCode',
        payload: {
          code: {
            isClick: false,
            count: 60
          }
        }
      })
      clearInterval(timer)
    }
  }
  let timer
  const clickCode = () => {
    if (phoneNoRight || disabledControl) {
     timer = setInterval(reduceCount, 1000)
    }
  }
    return (
      <Form
        onSubmit={submit}
        className={`${styles.stepFirstContainer} ${styles.stepSecondContainer}`}
      >
        <div className={styles.headWhite} />
        <div className={styles.inputSize}>
          <FormItem className="haveBorder">
            {getFieldDecorator('phoneNo', {
              rules: [
                { required: true, message: '请输入手机号' },
                { pattern: regPhone, message: '您输入的手机号格式错误' },
              ],
              initialValue: initValue,
            })(
              <InputItem placeholder="请输入手机号" type='number' disabled={disabledControl}>
                <ReactSVG src='svg/form/phone.svg' svgClassName={styles.svgSize}></ReactSVG>
                {
                  disabledControl ? <Button
                  size="small"
                  onClick={clickCode}
                  className={`${styles.codeSize} ${ styles.rightSize}`}
                >
                  {isClick ? `${count}后重发送` : `获取验证码`}
                </Button> :  <Button
                  size="small"
                  onClick={clickCode}
                  className={`${styles.codeSize} ${
                    phoneNoRight ? styles.rightSize : null
                  }`}
                >
                  {isClick ? `${count}后重发送` : `获取验证码`}
                </Button>
                }
              </InputItem>
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('code', {
              rules: [
                { required: true, message: '请输入短信验证码' },
                { pattern: regCode, message: '验证码输入错误' }
              ]
            })(
              <InputItem type='number' placeholder="请输入验证码">
                <ReactSVG src='svg/form/pwd.svg' svgClassName={styles.svgSize}></ReactSVG>
              </InputItem>
            )}
          </FormItem>
        </div>
        <FormItem>
          <Button type="primary" onClick={submit}>
            下一步
          </Button>
        </FormItem>
        <TipModal {...modalData}></TipModal>
      </Form>
    )
}
const WrappedStepSecond = Form.create()(stepSecond)
export default connect(state => state.code)(WrappedStepSecond)
